<!-- 用户反馈 -->
<template>
	<div class="feedback">
		<h2>用户反馈</h2>
		<!-- 表格 -->
		<Table
			:feedbacks="feedbacks"
			@filterChange="filterChange"
			@updateFeedback="feedbacks[$event.index]=$event.feedback"
		/>
		<div class="pagination">
			<el-pagination
				background
				layout="prev, pager, next"
				:page-size="pageSize"
				:total="total"
				:current-page="pageNum"
				@current-change="getFeedbackInfo"
			/>
		</div>
	</div>
</template>

<script>
import { getFeedbacks } from '@user/api/user'
import { FEEDBACK_TYPE, FEEDBACK_RESULT } from '@user/constants/feedback'
import Table from './components/Table.vue'
export default {
  route: {
    meta: {
      login: true,
      showLeft: true,
      activeName: 'Feedback',
    },
  },
  components: { Table },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      filter_type: null, // 反馈类型过滤
      filter_status: null, // 反馈状态过滤
      feedbacks: [],
    }
  },
  created() {
    this.getFeedbackInfo(1)
  },
  methods: {
    /**
		 * 获取反馈
		 */
    async getFeedbackInfo(pageNum = this.pageNum) {
      try {
        this.$loading()
        const res = await getFeedbacks({
          pageNum,
          pageSize: this.pageSize,
          type: this.filter_type,
          status: this.filter_status
        })

        this.feedbacks = res.data.pageData.map(feedback => {
          const type = FEEDBACK_TYPE.find(item => item.value === feedback.type)
          const feedbackResult = FEEDBACK_RESULT.find(item => item.value === feedback.level)

          return {
            ...feedback,
            time: moment(feedback.time).format('YYYY/MM/DD HH:mm:ss'),
            type: type ? type.text : '未知类型',
            feedbackResult: feedbackResult ? feedbackResult.text : null
          }
        })
        this.pageNum = pageNum
        this.total = res.data.total
        console.log(this.feedbacks)
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
    /* 筛选改变 */
    filterChange(filters) {
      for (const key in filters) {
        const res = filters[ key ]

        if (res.length === 0) {
          this[ key ] = null
        } else {
          this[ key ] = res[ 0 ]
        }
      }
      this.getFeedbackInfo(1)
    },
  }
}
</script>

<style lang="scss" >
.feedback {
  position: relative;
  padding: 20px;
  font-size: $sSmall;

  h2 {
    margin-bottom: 10px;
    color: $blue;
  }

  .feedback-time {
    white-space: pre-line;
  }

  .status {
    font-size: 20px;
  }

  .feedback-result {
    width: 130px;
    margin-bottom: 5px;
  }

  .remark {
    margin-top: 10px;
    color: $dark3;
  }

  .pagination {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
